import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:videotop/model/home_model.dart';
import 'package:videotop/widget/settings.dart';
import 'package:provider/provider.dart';
import '../base_view.dart';
import '../myinfo.dart';
import '../screen_service.dart';
import '../util.dart';
import 'message.dart';

class Home extends StatefulWidget {
  bool reg;

  Home({this.reg:false});
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _Home();
  }
}

class _Home extends State<Home> {
  List tabnormal = [
    'assets/image/tab_normal_03.png',
    'assets/image/tab_normal_02.png',
    'assets/image/tab_normal_04.png',
  ];
  List tabchoose = [
    'assets/image/tab_choosed_03.png',
    'assets/image/tab_choosed_02.png',
    'assets/image/tab_choosed_04.png',
  ];
  List<bool> bools = [false ,true, false];


  PageController controller = PageController(initialPage: 1);

  // int visit = 0;

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
    return BaseView<HomeModel>(
      onModelReady: (model){

      },
      model: HomeModel(context,widget.reg,Provider.of<Util>(context),Provider.of<MyInfo>(context)),
      builder: (context,model,child){
        if(widget.reg){
          model.util.showToast('Without avatars,Cannot be matched.');
          widget.reg = false;
        }
        return AnnotatedRegion<SystemUiOverlayStyle>(
            value: SystemUiOverlayStyle.light,
            child: Scaffold(
              body: Stack(
                children: <Widget>[
                  Container(
                    height: ScreenService.height,
                    width: ScreenService.width,
                    child: PageView(
                      controller: controller,
                      physics: NeverScrollableScrollPhysics(),
                      children: <Widget>[
                        Message(),

                        Settings(),
                        Settings(),
                      ],
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      height: 60,
                      padding: EdgeInsets.only(bottom: 15),
                      decoration: BoxDecoration(
                          gradient: LinearGradient(colors: [
                            Color(0x1F000000),
                            Color(0x52000000),
                            Color(0xa2000000),
                          ], begin: Alignment.topCenter, end: Alignment.bottomCenter)),
                      child: Row(
                        children: <Widget>[
                          bottomItem(0),
                          bottomItem(1),
                          bottomItem(2),
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ));
      },
    );
  }

  Widget bottomItem(int i) {
    return Expanded(
      child: Center(
        child: GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () {
            choose(i);
          },
          child: Stack(
            children: <Widget>[
              Container(
                padding: EdgeInsets.all(10),
                child: bools[i]
                    ? Image.asset(
                  tabchoose[i],
                  width: 25,
                  height: 25,
                  fit: BoxFit.cover,
                )
                    : Image.asset(
                  tabnormal[i],
                  width: 25,
                  height: 25,
                  fit: BoxFit.cover,
                ),
              ),
              Visibility(
                visible: i == 0 && context.watch<Util>().msgCount > 0,
                child: Positioned(
                  right: 1,
                  top: 1,
                  child: Container(
                    height: 18,
                    width: 25,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular((10)),
                      color: Color(0xffFFFB01),
                    ),
                    child: Center(
                      child: Text(
                        context.watch<Util>().msgCount > 99 ? '..' : context.watch<Util>().msgCount.toString(),
                        style: TextStyle(fontSize: 12, color: Colors.black),
                      ),
                    ),
                  ),
                ),
              ),
              Visibility(
                visible: i == 2,
                child: Positioned(
                  right: 6,
                  top: 6,
                  child: ClipOval(
                    child: Container(
                        height: 12, width: 12, color: Color(0xffFFFB01)),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  void choose(int i) {
    bools = [false, false, false];
    bools[i] = true;
    setState(() {

    });
    controller.animateToPage(i,
        duration: Duration(milliseconds: 500), curve: Curves.ease);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

}
